<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>alagis</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/public/css/index.css" rel="stylesheet">
    <link href="/public/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/public/js/jquery.min.js"></script>
    <script src="/public/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".maps").height($(window).height() - 46);
            $(window).resize(function () {
                $(".maps").height($(window).height() - 46);
            });

            $('#screenFull').click(function () {
                let content = $(this).html();
                $('.right-bar').toggle();
                if (content.indexOf('全屏') > -1) {
                    $('.content').css('marginRight', '0px');
                    content =
                        `<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> 还原`;
                } else {
                    $('.content').css('marginRight', '350px');
                    content =
                        `<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> 全屏`;
                }
                $(this).empty().append(content);

            });

            $(document).on("mouseover mouseout",".Map_y ul li",function(event){
                if(event.type == "mouseover"){
                    $(this).addClass("li_s");
                }else if(event.type == "mouseout"){
                    $(this).removeClass("li_s");
                }
            }); 

            $("#prevPage").click(function(){
                var num = $(this).attr("key");
                searchQuery(parseInt(num, 10));
            });

             $("#nextPage").click(function(){
                 var num = $(this).attr("key");
                searchQuery(parseInt(num, 10));
            });
            
        });


        function showResDiv(total, keyword) {
            $("#resultDiv span").eq(0).text(total);
            $("#resultDiv span").eq(1).text(keyword);
            $("#resultDiv").show();
            $("#loadingDiv").hide();
            
        }

        function showLoading() {
            $("#loadingDiv").show();
            $("#resultDiv").hide();
            $(".number").hide();
        }

        function clearSearchCondition() {
            $("#searchKey").val("");
            $("#location").val("");
            $("#loadingDiv").hide();
            $("#resultDiv").hide();
            $("#TabContent ul").empty();
            $(".number").hide();

        }

        function searchByPageNum(x) {
            searchQuery($("#searchKey").val(), $("#location").val(), x);
        }

        function searchQuery(pagenum,key, location) {

            pagenum = pagenum || 0;
            key = key || $("#searchKey").val();
            location = location || $("#location").val();
            
            let currentPageNum = pagenum+1;
            if(key !== $("#searchKey").val() && location !== $("#location").val()){
                showLoading();
            }
            
            $("#searchKey").val(key);
            $("#location").val(location);
            $.getJSON('/map/search.do', {
                queryKey: key,
                location: location,
                pageNum: pagenum
            }, function (res) {
                if (res.success && res.obj) {
                    showResDiv(res.obj.total, key);
                    let content = "";
                    $("#mapIframe")[0].contentWindow.initBaiDuDataIcon(res.obj.results,pagenum);
                    res.obj.results.forEach((ob,index)=>{
                        let iconNum = pagenum*10+index+1;
                        content +=`<li  onclick="">
                    <div class="MC">
                        <div class="nb">
                            <span class="icon">${iconNum}</span>
                        </div>
                        <div class="location-r">
                            <div class="DX">${ob.name}</div>
                            <div class="DZ">${ob.address}</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>`;
                    });
                    $("#TabContent ul").empty().append(content);
                        $("#currentPageNum").text(currentPageNum);
                        if(currentPageNum === 1 ){
                            $("#prevPage").hide();
                        }else{
                            $("#prevPage").attr("key",pagenum-1);
                            $("#prevPage").show();
                        }
                        if(pagenum === res.obj.totalPage+1){
                            $("#nextPage").hide();
                        }else{
                            $("#nextPage").attr("key",pagenum+1);
                            $("#nextPage").show();
                        }
                        $("#totalPage").text(res.obj.totalPage);
                        $(".number").show();
                }


            })
        }
    </script>
</head>

<body>
    <div class="content">
        <div class="container-topbar">
            <div class="f-l"></div>
            <div class="f-r">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-xs">
                        <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>工具</button>
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">测距</a>
                        </li>
                    </ul>
                </div>
                <button type="button" class="btn btn-default btn-xs" id="screenFull">
                    <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> 全屏</button>
            </div>
        </div>

        <div class="maps">
            <iframe id="mapIframe" src="/map.htm" style="height:100%;width:100%;margin-top: 40px;" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>

    <div class="right-bar">
        <input type="hidden" id="searchKey" value="" />
        <input type="hidden" id="location" value="" />
        <div class="right-topbar">
            <div id="loadingDiv">
                <img src="/public/images/loading.gif"> 搜索中...
            </div>
            <div id="resultDiv">
                <img src="/public/images/sigh.jpg">共有
                <span></span>项符合周边
                <span></span>的搜索结果.
            </div>

        </div>
        <div class="Map_y" id="TabContent">
            <ul>
                
            </ul>
            <div class="number" >
                <a href="javascript:;" title="上一页" id="prevPage" key="">[上一页]</a>
                <a href="javascript:;" >[<span id="currentPageNum">1</span>]</a>
                <a href="javascript:;" title="下一页" id="nextPage" key="">[下一页]</a>
                <a>[共<span id="totalPage">4</span>页]</a>
            </div>
        </div>
    </div>
</body>

</html>